<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>明德后台管理系统</title>
    <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css">
    <style>
        /* #upload {
        width: 100px;
        line-height: 40px;
        border-radius: 8px;
        outline: 0;
        border: 0;
        background-color: rgb(69, 146, 123);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
    } */
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 引入公共页面 -->
        {{include "./common/header.html" }}
        <!-- 引入公共页面 -->
        {{include "./common/side-menu.html" }}


        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <span class="layui-breadcrumb" lay-separator=">">
                    <a href="/">首页</a>
                    <a href="/add">文章添加</a>
                  </span>
                <form action="/insert" class="layui-form" method="post" enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题： </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="article" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label ">封面: </label>

                        <input type="file" name="img" id="img" style="display: none;" autocomplete="off">
                        <div class="layui-input-inline">
                            <button id="upload" class="layui-btn">Upload</button>
                        </div>

                    </div>

                    <div id="imgWrap" class="layui-form-item" style="display: none;">
                        <label class="layui-form-label">预览： </label>
                        <div class="layui-input-inline">
                            <img src="" id="preview-img" width="150px">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label ">作者： </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="author" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label "> 审核： </label>
                        <div class="layui-input-block">
                            <input type="radio" name="Audit_status" value='0' checked title="待审核">
                            <input type="radio" name="Audit_status" value='1' title="审核通过">
                            <input type="radio" name="Audit_status" value='2' title="审核失败">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label "> 所属分类： </label>
                        <div class="layui-input-inline">
                            <select name="cat_id">
                                <option value="0">请选择</option>
                                {{each cats item index}}
                                <option value="{{item.cate_id}}"name="is_delete">{{item.cate_name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label "> 内容： </label>
                        <div class="layui-input-block">
                            <textarea name="content" cols="30" rows="10" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal">添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
            </div>
            </form>
        </div>
    </div>

    <!-- 引入公共页面 -->
    {{include "./common/footer.html" }}

    </div>
    <script src="/static/js/jquery.js"></script>
    <script src="/static/layui-v2.6.8/layui/layui.js"></script>
    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作111', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作234</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
        // 上传文件
        let Upload = document.getElementById('upload');
        let imgEle = document.getElementById('img');
        Upload.onclick = function (event) {
            imgEle.click();
            // event.preventDefault(); 阻止默认行为
            return false;
        }
        imgEle.onchange = function () {
            let file = this.files[0]

            // 判断是否有上传文件，没有上传则退出
            if (!file) {
                return
            }

            let fileReader = new FileReader()
            fileReader.readAsDataURL(file)
            fileReader.onload = function (e) {
                // console.log(this.result)// base64
                document.getElementById('preview-img').src = this.result;
                document.getElementById('imgWrap').style.display = '';
            }
        }

    </script>
</body>
</html>